#AWSSummit のために、WordPressに #AWSおみくじ機能を追加してみた。

何か賑やかしたいとき、マーケターもコードが書けると便利ですよね。今回は市場規模ナンバー1のWordPressを活用して、簡単なアプリケーションを追加してしまおうという話です。ぜひお試しください。

AWS Summit Tokyo 2017

#WordPress

#マーケティング

#X（Twitter）

#Facebook

たいさ

2017.05.31

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

ハロー、今日からAWS Summit Tokyoですね。
品川に来られるかたは是非、クラスメソッドブースにいらしてくださいね。

AWSのプレミアコンサルティングパートナーである我々にとって、この日を盛り上げることはAWSもとい、クラウド業界を盛り上げる使命を持っているわけです。不毛なサーバー冷やしルームとか、急に止まっちゃったから俺たち帰れないし周りの目痛いよとか、そもそもサーバの音うるせー！とか、いうても急にリクエスト増えたら止まるよね！とか、そういう不毛なやつを救いたいわけですよ。クラウドでね！

というわけで、サミットを盛り上げるためのおみくじページを実装しやした。ｲｪｰｲ!!

要件

我々はブースで渡す紙のおみくじにQRコードを印刷して利用する。
ユーザはQRコードを読み取るとFacebookに投稿できる。
ユーザは表示されたページで、おみくじを引き直せる。
ユーザはページを、シェアできる
我々はページを、AWSサミットのポータルサイトとして、配布資料の表示などにも利用したい。
ユーザは登録フォームに登録すると資料がもらえる。（追加）
我々は開催予定のセミナーを全てお知らせする（5/29追加(ง `ω´)ง!! ）
ページ表示までにアニメーションか何か利用したい（5/29追加(ง `ω´)ง!! ）

ユーザーストーリー風に書いてみました。時間がなくても人は求めるものです...。「時間」、「予算」、「品質」、「スコープ」の四天王、どれかだけ優先してよ問題はたびたび発生しますが、だいたいにおいて、全て大事だ！と言われがちなんですよね。とほほ。

非機能要件

投稿したOGPには、おみくじの内容も含まれていたほうが良い
（よくある診断系は自分の結果が表示されなくてモヤモヤする…）
もう一度引いた時に、すぐにページが切り替わると安っぽいので、少し時間がかかるようにしたほうがいい。

タスク

QRコードで読み取ったらFacebookに投稿できる仕組みの調査
コーディング方法の検討〜実装
キャンペーンページの作成

QRコードで読み取ったらFacebookに投稿できる仕組みの調査

まずは「できるのか」という調査なので、いくつかの有名メディアのfacebookシェアボタンを押してみました。すると、sharer.php に URLを渡すだけのようです。
ただし、記号や日本語など一部の文字は16進数に変換する必要があります。

基本的なフォーマット
https://www.facebook.com/sharer/sharer.php?u=[URL]&display=popup&app_id=[APPID]

[URL] はシェア対象のURL。ちなみに【:】は %3A 【/】は %2F ですよ。
[APPID] はFacebookのdevelopers登録時のアプリのIDを入れてください。なお、ご自身の環境のものを使わないと急に動かなくなったりします。

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fclassmethod.jp%2Fomikuji%2Fno1-74322e6e616e6f%2F&display=popup&app_id=APP-ID

ちなみにTwitterの場合

こっちは割と単純です（今回は省略しますが、基本的にパラメータを渡すだけです）

基本的なフォーマット
https://twitter.com/intent/tweet?hashtags=[HASHTAG]&original_referer=[SITE_URL]&text=[TWEET]&url=[SITE_URL]

[HASHTAG] は複数入れることもできました。区切りに %20%23 を入れてください。
[SITE_URL] も記号は16進数で変換してください。
[TWEET] は本文です。全て16進数で変換してください。

今回、変換にはこのサービスを使いました。

試しに押してみてください

コーディング方法の検討

sharer.php にURLを渡すだけなんですが、これは ogp設定を各ページにしなければいけない ことを指します。

正直、twitterよりも大変です…

WordPressで組みやすよっと

1. モデルの設計をする

漢数字
パーマリンク
今日のインスタンス
今日のひとこと
OGP画像
ラッキーAWS
- サービスロゴ
- AWSの説明

新たにカスタム投稿タイプと、カスタムタクソノミーを追加すればできそうですね。

以下のコードは実際とは一部異なるのですが、便宜的に記載してます。

2. カスタム投稿タイプを作成する

function.php

以下を追加する。

<?php register_post_type('omikuji',// 投稿タイプ名の定義 array( 'labels' => array(
        'name' => __('AWSおみくじ'),
        'singular_name' => __('AWSおみくじ'),
      ),
      'public' => true,
      'capability_type' => 'post',
      'rewrite' => true,
      'supports' => array('title', 'thumbnail'),
      'has_archive' => true, // 一覧ページの有無
    )
  );
  /* ここからカテゴリタクソノミーの設定 */
  register_taxonomy(
    'omikuji-cat',
    'omikuji', // 上記で指定した投稿タイプ名
    array(
      'hierarchical' => true,
      'label' => 'おみくじカテゴリー',
      'singular_label' => 'おみくじカテゴリー',
      'public' => true,
    )
  );
  // URLの設定
  add_rewrite_rule('omikuji/$', 'index.php?post_type=omikuji&omikuji=$matches[1]', 'top');
?>

表示用のページを作成する

post_type のフロントページの標準テンプレは archive-[post_type_name].php になるので archive-omikuji.php を作成する
おみくじ個体の標準テンプレは single-[post_type_name].php なので、single-omikuji.php を作成する
カスタム投稿タイプにカスタムフィールドを追加する
カスタムタクソノミーにカスタムフィールドを追加する

ちなみに、カスタムタクソノミーを読み込むよりも、カスタムフィールドでカスタムタクソノミーを登録できるようにしたほうが、取得しやすかったです…

single-omikuji.php

今回のキーになるところだけ載せてます。

<?php // あとあと使い回すので、全て変数に入れておく $today_instance_type = get_field('today_instance_type'); $hitokoto = get_field('hitokoto'); $ogp_img = get_stylesheet_directory_uri().'/img/omikuji/ogp/'.get_the_ID().'.png'; $omikuji_no = get_field('omikuji_no'); $term = get_field('today_lucky_AWS'); // $aws_name, $aws_description; if( $term ): $aws_name = $term->name;
    $aws_description = $term->description;
    $aws_logo = get_field('aws_logo', 'omikuji-cat_'.$term->term_id);

    if( !$aws_logo ) {
      $aws_logo = get_stylesheet_directory_uri().'/img/aws/' . get_field('aws_logo_svg', 'omikuji-cat_'.$term->term_id);
    }

  endif;
  $title = "今日のラッキーAWSは".$aws_name." | クラスメソッドのAWSおみくじ at AWSSummit2017";
?>
<!-- （中略） -->
<!-- 以下、header内に入力 -->
  <meta property="og:title" content="<?php echo $title; ?>" />
  <meta property="og:type" content="article" />
  <meta property="og:url" content="<?php the_permalink(); ?>" />
  <meta property="og:image" content="<?php echo $ogp_img;?>" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:description" content="<?php echo $hitokoto;?>" />
  <meta property="og:site_name" content="AWSおみくじ | クラスメソッド" />
  <meta property="og:locale" content="ja_JP" />
  <meta property="fb:app_id" content="APP_ID">
   
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="<?php echo $title; ?>">
  <meta name="twitter:description" content="<?php echo $hitokoto;?>">
  <meta name="twitter:image:src" content="<?php echo $ogp_img;?>">
  <meta name="robots" content="noindex">
<!-- （中略） -->

archive.php

6種類の画像のどれかを選択したら個別の結果に飛べるような仕組みにしました。それ以外は省略。

<?php
  $args = array(
    'post_type' => 'omikuji', // 投稿タイプ名
    'posts_per_page' => -1, // 全件
    'order'=>'rand', // ランダム
  );
  $query = new WP_query($args);
  $omikuji_img = 0;
  if( $query->have_posts() ) {
    while ($query->have_posts()) {
      $query->the_post();
      echo '<li class="item">';
      echo '<a href="'.get_permalink().'"><img src="'.get_stylesheet_directory_uri().'/img/omikuji/mikuji_'.($omikuji_img % 6).'.png" alt="AWSおみくじ" /></a>';
      echo '</li>';
      $omikuji_img ++;
    }
  }
?>

いかがでしたでしょうか？なんとかなってよかった。。。
時間優先で組んだので、ご指摘ありましたら、お手柔らかにコメントくださいませ(´-ω-`)